<!DOCTYPE html>

<html>

<head>
<title>Test case</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
		

<!-- support lib for bezier stuff -->
		<script type="text/javascript" src="../js/lib/jsBezier-0.2-min.js"></script>
		<!-- main jsplumb engine -->
		<script type="text/javascript" src="../js/1.3.1/jsPlumb-1.3.1-RC1.js"></script>
		<!-- connectors, endpoint and overlays  -->
		<script type="text/javascript" src="../js/1.3.1/jsPlumb-defaults-1.3.1-RC1.js"></script>
		<!-- SVG renderer -->
		<script type="text/javascript" src="../js/1.3.1/jsPlumb-renderers-svg-1.3.1-RC1.js"></script>
		<!-- canvas renderer -->
		<script type="text/javascript" src="../js/1.3.1/jsPlumb-renderers-canvas-1.3.1-RC1.js"></script>
		<!-- vml renderer -->
		<script type="text/javascript" src="../js/1.3.1/jsPlumb-renderers-vml-1.3.1-RC1.js"></script>
		<!-- jquery jsPlumb adapter -->
		<script type="text/javascript" src="../js/1.3.1/jquery.jsPlumb-1.3.1-RC1.js"></script>
	
<script type="text/javascript">
"use strict";
$(function() {
	var opt = {
		anchor: "TopCenter",
		paintStyle: {fillStyle:"#999"},
	};

	jsPlumb.addEndpoint("node0", opt); 
	jsPlumb.addEndpoint("node1", opt); 
	jsPlumb.addEndpoint("node2", opt); 
	jsPlumb.addEndpoint("node3", opt); 
});
</script>
<style type="text/css">
.style0 {position: absolute; top: 40px; left: 30px; }
}
</style>

</head>

<body>
<p>Testcase:</p>
	<div id="container0" class="style0">
		<div id="node0" style="width:200px; height: 50px; background-color: green;">
			Node0
		</div>
	</div>

	<div id="container1" style="margin-top: 100px;">
		<div id="node1" style="width:200px; height: 50px; background-color: yellow;">
			Node1
		</div>
	</div>


<div style="position: absolute; top: 20px; left: 250px; border: 2px solid red;">
	<div id="container2" class="style0">
		<div id="node2" style="width:200px; height: 50px; background-color: green;">
			Node2
		</div>
	</div>

	<div id="container3" style="margin-top: 100px;">
		<div id="node3" style="width:200px; height: 50px; background-color: yellow;">
			Node3
		</div>
	</div>
</div>

</body>
</html>